<template>
  <div class="main-app">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="600px"
      style="margin-top: 50px"
    >
      <el-form-item
        v-if="id !== ''"
        label="仓库编号:"
        prop="name"
        style="width: 60%"
      >
        <el-input v-model="form.number" disabled />
      </el-form-item>
      <el-form-item label="仓库名称:" prop="name" style="width: 60%">
        <el-input v-model="form.name" :disabled="isView" clearable />
      </el-form-item>
      <el-form-item label="仓库类型:" prop="type" style="width: 60%">
        <el-select
          v-model="form.type"
          placeholder="请选择仓库类型"
          style="width: 100%"
          :disabled="isView"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            clearable
          />
        </el-select>
      </el-form-item>
      <el-form-item label="仓库容量:" prop="totalCapacity" style="width: 60%">
        <el-input
          v-model="form.totalCapacity"
          type="number"
          :disabled="isView"
          clearable
        />
      </el-form-item>
      <el-form-item label="负责人:" prop="personId" style="width: 60%">
        <el-select
          v-model="form.personId"
          placeholder="请选择负责人"
          style="width: 100%"
          :disabled="isView"
        >
          <el-option
            v-for="item in personIdOptions"
            :key="item.guid"
            :label="item.name"
            :value="item.guid"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="批次:" style="width: 60%">
        <el-input v-model="form.batch" :disabled="isView" clearable />
      </el-form-item>
      <el-form-item label="仓库面积:" style="width: 60%">
        <el-input v-model="form.area" :disabled="isView" clearable />
      </el-form-item>
    </el-form>
    <el-row style="margin-top: 40px; text-align: center">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button type="primary" @click="save" :disabled="isView"
            >提交</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { WarehouseCategory } from "../../../utils/resource";
import { getUserByEnterpriseId } from "../../../api/user";
import { save, getWareHouseById } from "../../../api/warehouse";
export default {
  data() {
    return {
      form: {
        type: "",
        name: "",
        totalCapacity: "",
        personId: "",
        orgName: "",
        batch: "",
        area: "",
        number: "",
      },
      options: WarehouseCategory,
      personIdOptions: [],
      rules: {
        totalCapacity: [
          { required: true, message: "请输入仓库容量", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入仓库名称", trigger: "blur" }],
        type: [
          { required: true, message: "请选择仓库类型", trigger: "change" },
        ],
        personId: [
          { required: true, message: "请选择负责人", trigger: "change" },
        ],
      },
      id: "",
    };
  },
  computed: {
    isView() {
 
      return this.$route.name === "仓库详情";
    },
  },
  async created() {
    const { data } = await getUserByEnterpriseId();
    this.personIdOptions = data;
    const { id } = this.$route.params;
    if (!id) {
      if (data != null) {
        for (const p of data) {
          if (p.orgRemarks !== null) {
            this.form.orgName = p.orgRemarks;
            break;
          }
        }
      }
    } else {
      this.id = id;
      await this.getWareHouseById(id);
    }
  },
  methods: {
    async getWareHouseById(id) {
      const { data } = await getWareHouseById(id);
      this.form.name = data.name;
      this.form.type = data.type;
      this.form.personId = data.personId;
      this.form.totalCapacity = data.totalCapacity.toString();
      this.form.orgName = data.orgName;
      this.form.batch = data.batch;
      this.form.area = data.area;
      this.form.number = data.number;
    },
    save() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          const person = this.personIdOptions.find(
            (p) => p.guid === this.form.personId
          ).name;
          let data = {
            name: this.form.name,
            type: this.form.type,
            personId: this.form.personId,
            personName: person,
            totalCapacity: this.form.totalCapacity,
            orgName: this.form.orgName,
            batch: this.form.batch,
            area: this.form.area,
          };
          let message = "";
          if (!this.id) {
            message = "新增";
          } else {
            data = Object.assign({ id: this.id }, data);
            message = "修改";
          }
          await save(data);
          this.$notify({
            title: "成功",
            message: `仓库${message}成功`,
            type: "success",
            duration: 3000,
          });
          this.$router.push("/warehouse");
        }
      });
    },
    cancel() {
      this.$router.push("/warehouse");
    },
  },
};
</script>
